<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>经纪人排行榜</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <h2>经纪人排行表</h2>
        </div>
        <div class="layui-card-body">
            <div id="main" style="width:100%;height:600px;"></div>
        </div>

    </div>
</div>
</div>
</body>
<script type="text/javascript" src="/jquery/jquery.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="/ehcarts/echarts.min.js"></script>
<script>

    //获取所有经纪人邀请客户数量
    let user = layui.data('user');
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));

    $.post('get_company_agent', {user_id: user.user_id}, function (resp) {
        let agentNameList = new Array();
        let agentNumList = new Array();
        let customerNumList = new Array();
        let dealCustomerNumList = new Array();
        let dealMoneyList = new Array();
        for (let i = 0; i < resp.data.agentName.length; i++) {
            agentNameList[i] = resp.data.agentName[i].agentName;
            agentNumList[i] = resp.data.agentNum[i];
            customerNumList[i] = resp.data.customerNum[i];
            dealCustomerNumList[i] = resp.data.dealCustomerNum[i];
        }

        let option = {
            color: ['#003366', '#006699', '#4cabce', '#e5323e'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                data: ['邀请的经纪人总数', '报备客户总数', '已成交客户总数', '成交合同总金额(元)']
            },
            xAxis: [
                {
                    type: 'category',
                    data: agentNameList,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '邀请的经纪人总数',
                    type: 'bar',
                    barGap: 1,
                    data: agentNumList
                }
                ,
                {
                    name: '报备客户总数',
                    type: 'bar',
                    barGap: 1,
                    data: customerNumList
                },
                {
                    name: '已成交客户总数',
                    type: 'bar',
                    barGap: 1,
                    data: dealCustomerNumList
                },
                {
                    name: '成交合同总金额(元)',
                    type: 'bar',
                    barGap: 1,
                    data: [10, 52, 200, 334, 390, 330, 220]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });
    // 指定图表的配置项和数据

</script>
</html>